<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型布局练习1</title>
</head>
<body>
    <style>
        *{
            font-size: 0px;
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        div{
            /*  vertical-align:top 没加文字往下移动 */
            vertical-align:top;   
            width: 145px;
            height: 125px;
          
        } 
     
        .father{
            width: 327px;
            height: 284px;
            padding: 10px;
            position: relative;
        
        
        }

        div[class^=son]{
            padding: 12px 0px 0px 10px;
        }
        /*   */
        .son1{
          
           display: inline-block;
           top: 0px;
           left: 0px;
           border: 8px solid rgb(218,223,231);
        }
        .son2{
          
           display: inline-block;
           margin-top: 0px;
           margin-left: 15px;
           border: 8px solid rgb(218,223,231);
        }
 
        .son3{
           position: relative;
           display: inline-block;
           top: 18px;
           left: 0px;
           border: 8px solid rgb(218,223,231);
        }

        .son4{
           position: relative;
           display: inline-block;
           top: 18px;
           left: 15px;
           border: 8px solid rgb(218,223,231);
        }
        
        div h3{
            width: 130px;
            line-height: 14px;
            font-size: 14px;
            margin-bottom: 10px;
           
        }

        div span{
            display: block;
            line-height: 12px;
            font-size: 12px;
            width: 78px;
            
            
        }

        
    </style>

    <div class="father">
        <div class="son1">
            <h3>采购</h3>
            <span>有创意的想法和充满欲望的开创未来联合聘用人才。</span>
        </div>
        <div class="son2">
            <h3>招聘信息</h3>
            <span>基于多年的社会能力的经验，充分发挥聘请人才。</span>
        </div>

        <div class="son3">
            <h3>文员</h3>
            <span>所有营的工作人员总是在一起，可以是一个招聘称职的员工。</span>
        </div>
        <div class="son4">
            <h3>呼叫中心坐席</h3>
            <span>客户需要伸出援助之手，每当你使用一个代理来。</span>
        </div>
        
    </div>
</body>
</html>